<cfcomponent output="false">

	<!--- --->
	
	<cffunction name="renderAddForm" access="public" output="true" returntype="string">
		
		<cfset var local = {} />
				
		<cfsavecontent variable="local.result">
			<div class="widget short edit">
				<div class="widget-title">Add Workweek Actions</div>
				#$.render.form(name='new_workweek_events',method='workweekController.saveWorkweekEvents',onsubmit="return Workweek.validateSaveWorkweekEvents(this);")#
					#$.run.it('workweekView.renderFormElements')#
					<div class="buttons">
						<button type="submit" name="action_save" class="right red">save</button>
						<button type="button" name="action_cancel" class="right grey" onclick="Workweek.hideAdd();">cancel</button>
					</div>
				</form>
			</div>
		</cfsavecontent>

		<cfreturn $.render.clean(local.result) />

	</cffunction>

	<!--- --->

	<cffunction name="renderFormElements" access="public" output="true" returntype="string">
		
		<cfset var local = {} />
		
		<cfsavecontent variable="local.result">
			<script>
				validateDuration = function(that){
					var $select = $(that);
					var $minute = $select.nextAll('[name=duration_minute]');
					var $zero = $minute.find('option[value=0]');						
					console.log($minute);
					console.log($minute.val());
					console.log($minute.attr('name'));
					
					if($select.val() == 0){
						if($minute.val() == '0'){
							$minute.val(30);
						}
						$zero.prop('disabled',true);
					} else {
						$zero.prop('disabled',false);
					}
				}
			</script>
			#application.v.craftivityView.renderInput(name="name",label="Name",validate="required",varchar=200)#
			#application.v.craftivityView.renderWeekdayCheckboxes(useWorkweekFilter=true)#
			<div class="form-input action-duration">
				<div class="form-input-label">Duration</div>
				<div class="form-input-value">
					<select name="duration_hour" onchange="validateDuration(this);">
						<cfloop list="0,1,2,3,4,5,6,7,8" item="local.hours">
							<option value="#local.hours#"<cfif local.hours eq 1>selected</cfif>>#local.hours#</option>
						</cfloop>
					</select>
					<span>hr</span>
					<select name="duration_minute">
						<cfloop list="0,15,30,45" item="local.minutes">
							<option value="#local.minutes#" <cfif local.minutes eq "0">selected</cfif>>#local.minutes#</option>
						</cfloop>
					</select>
					<span>min</span>
				</div>
			</div>
			<div class="form-input action-duration">
				<div class="form-input-label">Category</div>
				<div class="form-input-value">
					#renderCategorySelect()#
					<div class="form-input-instructions">
						<i class="fa fa-bookmark"></i>
						<span id="category-select-name">No Category</span>
					</div>
				</div>

			</div>
		</cfsavecontent>

		<cfreturn $.render.clean(local.result) />

	</cffunction>

	<!--- --->
	
	<cffunction name="renderCategorySelect" access="public" output="true" returntype="string">
		
		<cfset var local = {} />
		
		<cfset local.options = $.run.it('optionService.getOptions',{key="workweek"}) />
		
		<cfsavecontent variable="local.result">
			<script>
				var WorkweekCategory = {
					init:function(){
						$('.workweek-event-category').unbind('click.workweekCategory').bind('click.workweekCategory',function(){
							WorkweekCategory.select(this);
						});
						$('.workweek-event-category').unbind('mouseenter.workweekCategory').bind('mouseenter.workweekCategory',function(){
							var $this = $(this);
							var name = $this.attr('catName') || "No Category";
							var $form = $this.closest('form');
							$form.find('##category-select-name').text(name);
							$form.find('##category-select-name').show();
						}).unbind('mouseleave.workweekCategory').bind('mouseleave.workweekCategory',function(){
							var $form = $(this).closest('form');
							var $selected = $('.workweek-event-category.selected');
							var name = $selected.attr('catName') || "No Category";
							$form.find('##category-select-name').text(name).hide();
						});
						
						$('.workweek-event-category.we-cat0').parent().unbind('mouseleave.workweekCategory2').bind('mouseleave.workweekCategory2',function(){
							$(this).find('##category-select-name').show();
						});
					},
					select:function(that){
						var $this = $(that);
						$('.workweek-event-category.selected').removeClass('selected');
						$this.addClass('selected');
						var name = $this.attr('catName') || "No Category";
						$('##category-select-name').text(name);
						$this.parent().find('[name=category]').val($this.attr('val'));
					}
				};
				$(document).ready(function(){
					WorkweekCategory.init();
				});
			</script>
			<div val="0" class="workweek-event-category we-cat0 selected"></div>
			<cfloop from="1" to="6" index="local.i">
				<cfif listLen(local.options.categories) gte local.i>
					<cfset local.category = listGetAt(local.options.categories,local.i) />
				<cfelse>
					<cfset local.category = "Category #local.i#" />
				</cfif>
				<div val="#local.i#" class="workweek-event-category we-cat#local.i#" catName="#local.category#"></div>
			</cfloop>
			<input type="hidden" name="category" value="0" />
		</cfsavecontent>

		<cfreturn $.render.clean(local.result) />

	</cffunction>

	<!--- --->

</cfcomponent>